<template>
  <div class="notification-page">
    <!-- 导航栏 -->
    <van-nav-bar title="消息" left-arrow @click-left="goBack" />

    <!-- 消息内容 -->
    <div class="message-list">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        :class="[
          'message-item',
          {
            unread: notification.isRead === 0,
            read: notification.isRead === 1,
          },
        ]"
      >
        <div class="message-title">{{ notification.title }}</div>
        <div class="message-body">{{ notification.message }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
import userProfileApi from "@/api/userProfile";

export default {
  components: {
    "van-nav-bar": NavBar,
  },
  data() {
    return {
      notifications: [],
    };
  },
  mounted() {
    this.getUserMessage();
  },
  methods: {
    getUserMessage() {
      userProfileApi.getUserMessage().then((res) => {
        console.log(res);
        this.notifications = res;
      });
    },
    goBack() {
      userProfileApi.readUserMessage();
      this.$router.go(-1); // 返回上一页
    },
  },
};
</script>

<style scoped>
/* 页面布局 */
.notification-page {
  height: 100vh; /* 页面高度使用视口单位 */
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

.message-list {
  flex: 1; /* 消息区域占满剩余的空间 */
  overflow-y: auto; /* 如果内容超出，显示滚动条 */
  padding: 1.5vh 3vw;
  scroll-behavior: smooth; /* 平滑滚动效果 */
}

.message-item {
  padding: 2vh 3vw;
  margin-bottom: 2.5vh;
  border-radius: 1vh;
  background-color: #f7f7f7;
  box-shadow: 0 0.3vh 0.8vh rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message-item:hover {
  transform: translateY(-0.3vh);
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.2);
}

.message-title {
  font-size: 4vw;
  font-weight: bold;
  color: #333;
  margin-bottom: 1.5vh;
  word-break: break-word; /* 长标题换行处理 */
}

.message-body {
  font-size: 3.5vw;
  color: #666;
  line-height: 1.6; /* 提升文字的可读性 */
}

.unread {
  background-color: #fff; /* 未读消息背景色为白色 */
  border-left: 0.5vh solid #007aff; /* 未读消息左侧蓝色标识 */
}

.read {
  background-color: #f0f0f0; /* 已读消息背景色为浅灰 */
  color: #888; /* 已读消息的字体颜色更淡 */
}

/* 导航栏样式 */
.van-nav-bar {
  background: linear-gradient(to right, #007aff, #4a90e2);
  color: white; /* 设置文字颜色 */
  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.1); /* 添加阴影 */
  padding: 0.5vh 0;
}

.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
  font-size: 5vw;
  font-weight: bold; /* 加粗标题 */
  color: white !important; /* 确保颜色为白色 */
  
}

.van-nav-bar ::v-deep .van-nav-bar__arrow{
  color: white !important;
}
</style>
